<template>
  <!-- 修改地址的对话框 -->
  <el-dialog title="修改地址" v-model="addressDialogVisible" width="50%" @close="addressDialogClosed">
    <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
      <el-form-item label="省市区/县" prop="address1">
        <el-cascader :options="cityOptions" v-model="addressForm.address1" ref="cateHandle" :props="cascaderProps" clearable change-on-select></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address2">
        <el-input v-model="addressForm.address2"></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="addressDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addressDialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import cityData from '@/api/constants/cityData.js'
// 控制对话框的显示和隐藏
const addressDialogVisible = ref(false)
// 表单对象
const addressFormRef = ref(null)

// 表单数据
const addressForm = ref({
  address1: [],
  address2: ''
})
// 表单验证规则
const addressFormRules = {
  address1: [{ required: true, message: '请选择省市区/县', trigger: 'blur' }],
  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}

// 级联菜单相关
const cityOptions = ref(cityData)
// 配置级联菜单中数据如何展示
const cascaderProps = ref({
  // 默认情况下，级联菜单的选项是点击触发的，如果需要hover触发，需要配置该属性
  expandTrigger: 'hover'
})

// 组件对象
const cateHandle = ref(null)
// 对话框关闭时的回调
const addressDialogClosed = () => {
  // 重置表单
  addressFormRef.value.resetFields()
}

const open = () => {
  addressDialogVisible.value = true
}

// 向外暴露的方法
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
</style>